<template>
  <div class="system-message">
    <div class="title-nav flex align-center flex-between">
      <div class="title">站内最新消息</div>
      <div class="more" @click="handMore">
        <span>更多</span>
        <i class="esayIcon esayIcon-youjiantou"></i>
      </div>
    </div>
    <div class="list">
      <template v-if="tableData.length === 0">
        <div class="empty">
          <n-empty size="large" description="暂无数据~"></n-empty>
        </div>
      </template>
      <template v-else>
        <div
          class="item hover-shadow"
          v-for="item in tableData"
          :key="item.id"
          @click="handDetail(item)"
        >
          <div class="icon">
            <img src="@/assets/icon/user/message.png" alt="" />
          </div>
          <div class="title u-line-1">{{ item.title }}</div>
          <div class="date">{{ item.createTime }}</div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import messageApi from '@/service/api/message'
import { NEmpty } from 'naive-ui'

const router: any = useRouter()
const handMore = () => {
  router.push('/my/message')
}
const handDetail = (e: any) => {
  console.log(e)
  // messageApi.read(e.id)
  handMore()
}
interface tableDataItem {
  id: number
  title: string
  createTime: string
}
const tableData = ref<tableDataItem[]>([])
const init = async () => {
  // const { data } = await messageApi.message({
  //   current: 1,
  //   size: 4
  // })
  // tableData.value = data.records
  tableData.value = [
    {
      id: 1,
      title: '我是标题',
      createTime: '2021-09-09 12:00:00'
    },
    {
      id: 2,
      title: '我是标题',
      createTime: '2021-09-09 12:00:00'
    }
  ]
}
init()
</script>

<style scoped lang="scss">
.system-message {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  .title-nav {
    padding: 14px 28px;
    border-bottom: 1px solid #eeeeee;
    .title {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .more {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #f1423d;
      cursor: pointer;
      i {
        font-size: 14px;
      }
    }
  }
  .empty {
    padding-top: 25px;
  }
  .list {
    margin-top: 16px;
    padding-bottom: 20px;
    height: 180px;
    overflow-y: auto;
    .item {
      display: flex;
      align-items: center;
      padding: 10px 28px;
      cursor: pointer;
      .icon {
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
          display: block;
        }
      }
      .title {
        margin-left: 5px;
        flex: 1 0 0;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
      .date {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
  }
}
</style>
